<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jstl/core"> 



<ui:composition>

	<div id="#{idAccordion}">

		<ui:insert>
		
		</ui:insert>

	</div>

	
<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/resources/componentes/accordion/js/accordion.js"></script>

<script type="text/javascript">

<c:if test = "#{not empty idAccordion}"> // INÍCIO DA MONTAGEM, VERIFICA SE O ID FOI REALMENTE INFORMADO, SE NÃO, APENAS NENHUMA AÇÃO SERÁ FEITA

	var ac = new Accordion(); // VÁRIAVEL QUE DÁ UMA NOVA INSTÂNCIA AO ACCORDION()

	var idAccordion = "#{idAccordion}"; // RECEBENDO O ID DO ACCORDION		
	var form = "#{form}"; 				// RECEBENDO O NOME DO FORMULÁRIO
	var idHeader = "#{idHeader}";		// RECEBENDO O ID DO CABEÇALHO
	var idBody = "#{idBody}";			// RECEBENDO O ID DO CORPO
	
	var json = {};						// NOVO JSON

	var jsonHeader = {};				// JSON AUXILIAR PARA RECEBER OS ICONES INFORMADOS DO USUÁRIO


	// C:IF QUE VERIFICA VAZIO. EX: SE O ATRIBUTO 'EMPTY' ESTÁ VAZIO.
	<c:if test = "#{not empty collapsible}">

		json = $.extend(json,{"collapsible": "#{collapsible}" });

	</c:if>

	//***************************************************************** CONDIÇÃO DO ANIMATE
	<c:if test = "#{not empty animate}">

		var animate = "#{animate}";
		
		//************************************ ANIMATE
		// C:IF QUE VERIFICA IGUALDADE. EX: SE O ATRIBUTO 'ANIMATE' É IGUAL A BOUNCE,
		// CASO FOR IGUAL, ELE ATRIBUI O ICONE 'easeOutBounce'.
		// O MESMO É FEITO PARA OS "C:IF" INTERNOS.
		<c:if test="#{animate eq 'bounce'}" >
	
			json = $.extend(json,{"animate": "easeOutBounce"});
	
		</c:if>
	
		<c:if test="#{animate eq 'swing'}" >
	
			json = $.extend(json,{"animate": "swing"});
	
		</c:if>
	
	
		<c:if test="#{animate eq 'elastic'}" >
	
			json = $.extend(json,{"animate": "easeInOutElastic"});
			
		</c:if>

	</c:if>

	// VERIFICANDO SE O ATRIBUTO 'EVENT' ESTÁ VAZIO
	<c:if test = "#{not empty event}">

		// VERIFICANDO IGUALDADE DO ATRIBUTO 'EVENT'. SE ELE É IGUAL A CLICK OU MOUSEOVER
		<c:if test = "#{event eq 'click'}"> //EVENTO AO CLICAR ABRE O ACCORDION

			json = $.extend(json, {"event": "click"});
		
		</c:if>

		<c:if test = "#{event eq 'mouse'}"> //EVENTO AO PASSAR O MOUSE ABRE O ACCORDION

			json = $.extend(json, {"event": "mouseover"});
	
		</c:if>		
		
	
	</c:if>

	// VERIFICANDO SE O ATRIBUTO 'HEIGHTSTYLE' ESTÁ VAZIO.
	<c:if test = "#{not empty heightStyle}">

	
		json = $.extend(json, {"heightStyle": "#{heightStyle}"});

	</c:if>

	//***************************************************************** CONDIÇÃO DO ICONS
	// VERIFICANDO SE O ATRIBUTO 'HEADER' ESTÁ VAZIO.
	<c:if test = "#{not empty header}">

		var header = "#{header}";
	
		//************************************ HEADER
		// VERIFICANDO IGUALDADE DO ATRIBUTO 'HEADER'. SE ELE É IGUAL O PASSADO PELO USUÁRIO.
		
		<c:if test="#{header eq 'arrow'}">

			jsonHeader = $.extend(jsonHeader,{ "header": "ui-icon-arrowreturnthick-1-w" });
				
		</c:if>
	
		<c:if test="#{header eq 'plus'}">
			
			jsonHeader = $.extend(jsonHeader,{ "header": "ui-icon-plus" });
			
		</c:if>

		<c:if test="#{header eq 'triangle'}"> 

			jsonHeader = $.extend(jsonHeader,{ "header": "ui-icon-triangle-1-e" });			

		</c:if>			

	</c:if>

	//***************************************************************** CONDIÇÃO DO ACTION HEADER
	// VERIFICANDO SE O ATRIBUTO 'ACTIVEHEADER' ESTÁ VAZIO.
	<c:if test = "#{not empty activeHeader}">
		
		var activeHeader = "#{activeHeader}";
		
		//************************************ ACTIVE HEADER
		// VERIFICANDO IGUALDADE DO ATRIBUTO 'ACTIVEHEADER'. SE ELE É IGUAL O PASSADO PELO USUÁRIO.
		
		<c:if test="#{activeHeader eq 'arrowOpen'}"> 

			jsonHeader = $.extend(jsonHeader,{ "activeHeader": "ui-icon-arrowreturnthick-1-s" });
			
		</c:if>
	
		<c:if test="#{activeHeader eq 'triangleOpen'}">

			jsonHeader = $.extend(jsonHeader,{ "activeHeader": "ui-icon-triangle-1-se" });			

		</c:if>
	
		<c:if test="#{activeHeader eq 'minusOpen'}">
	
			jsonHeader = $.extend(jsonHeader,{ "activeHeader": "ui-icon-minus" });
						
		</c:if>	

	</c:if>

	// ADICIONARÁ O HEADER E ACTIVE HEADER UMA VEZ SÓ COMO JSONHEADER NO ICONS
	json = $.extend(json, {"icons": jsonHeader});

	
	//***************************************************************** EVENTOS
	
	<c:if test="#{destroy eq 'true'}">
	
		ac.destroy("#" + form + " " + "#" + idAccordion);

	</c:if>

	<c:if test="#{disable eq 'true'}">
	
		ac.disable("#" + form + " " + "#" + idAccordion);

	</c:if>

	<c:if test="#{refresh eq 'true'}">
	
		ac.refresh("#" + form + " " + "#" + idAccordion);

	</c:if>

	<c:if test="#{enable eq 'true'}">
	
		ac.enable("#" + form + " " + "#" + idAccordion);

	</c:if>

// 	PARA UTILIZAR O ACCORDION, VOCÊ TERÁ QUE PASSAR O ID DE UM FORMULARIO E O ID DO ACCORDION, PORTANTO UTILIZE ASSIM:  "##{NOME}"
//	O PRIMEIRO "#" É REFERENTE AO NOME NORMAL, O SEGUNDO É DA VÁRIAVEL : "#{NOME}"

	if(json){ // SE O JSON ESTIVER VAZIO ELE CAI NO ELSE, E MONTA UM ACCORDION COM TODAS AS OPÇÕES DEFAULT.

		console.log(form);
		ac.createAccordion("#" + form + " " + "#" + idAccordion,json); // CONSTRÓI O ACCORDION COM O JSON INFORMADO PELO USUÁRIO.

		// COM ESTA FUNCTION VOCÊ CONSEGUE CRIAR UM ICONE ANIMADO. PASSANDO O SELETOR DO CAMPO + O JSON DOS ICONES
		ac.whereActiveOrNot("#" + form + " " + "#" + idAccordion, jsonHeader.header);
		 
	}else{
		
		ac.createAccordion("#" + form + " " + "#" + idAccordion); // CONSTRÓI UM ACCORDION DEFAULT.
	}

</c:if> // --- FIM 

</script>

</ui:composition>

</html>